<template>

  <div>
    <!--面包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--用户列表卡片-->
    <el-card class="box_card">
      <!--表单-->
      <el-form :inline="true" :model="userVO" ref="userVO" class="demo-form-inline" >
        <el-form-item label="部门" label-width="70px">
          <el-select v-model="userVO.departmentId" clearable placeholder="请选择">
            <el-option
              v-for="item in departments"
              :key="item.id"
              :label="item.name"
              :value="item.id">
              <span style="float: left">{{ item.name }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">
                <span class="el-tag el-tag--success el-tag--mini el-tag--plain">{{ item.deptCount}}人</span>
              </span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px" clearable>
          <el-input clearable v-model="userVO.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input clearable v-model="userVO.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="70px">
          <el-radio v-model="userVO.sex" label="0">男</el-radio>
          <el-radio v-model="userVO.sex" label="1">女</el-radio>
          <el-radio v-model="userVO.sex" label="">全部</el-radio>
        </el-form-item>
        <el-form-item label="昵称" label-width="70px">
          <el-input clearable v-model="userVO.nickName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 15px">
          <el-button icon="el-icon-refresh" @click="resetUserVO('userVO')">重置</el-button>
          <el-button type="primary" icon="el-icon-search" @click="getUserList">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格内容显示-->
      <el-table
        :data="userList"
        border
        height="400"
        style="width: 100%;">
        <el-table-column
          prop="id"
          label="#"
          width="50">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.sex === 0 ? 'primary' : 'warning'"
              disable-transitions>{{scope.row.sex==0?'帅哥':'美女'}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="departmentId"
          label="所属部门"
          sortable
          width="150">
        </el-table-column>
        <el-table-column
          prop="birth"
          label="生日"
          sortable
          width="130">
          <template slot-scope="scope">
            <span>{{scope.row.birth}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phoneNumber"
          label="电话"
          width="150">
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否禁用"
          width="110">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status==0">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column
          label="操作">
          <el-row>
            <el-button type="primary" icon="el-icon-edit-outline"></el-button>
            <el-button type="danger" icon="el-icon-delete"></el-button>
            <el-button type="warning" icon="el-icon-s-tools"></el-button>
          </el-row>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPageNumber"
        :page-sizes="[5, 15, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        background
        :total="total">
      </el-pagination>
    </el-card>
    <UserAdd :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></UserAdd>
  </div>
</template>

<script>
  import {findUserList} from "../../api/users";
  import {findDeptAndCount} from '@/api/dept';
  import ElSwitch from "element-ui/packages/switch/src/component";
  import UserAdd from './UserAdd'
  export default {
    components: {
      ElSwitch,
      UserAdd
    },
    name: "Users",
    data() {
      return {
        // 控制新增编辑弹窗的显示与隐藏
        addOrUpdateVisible: false,
        userVO: {
          departmentId: '',
          username: '',
          email: '',
          sex: '1',
          nickName: ''
        },
        // 用户集合
        userList: [],
        // 部门集合
        deptList: [],
        // 每页显示的条数
        pageSize: 5,
        // 总条数
        total: 100,
        currentPageNumber: 1,
        departments: []
      }
    },
    created() {
      // 创建组件时查询所以用户的方法
      this.getUserList();
      // 查询部门信息和部门人数统计
      this.getDeptListAndCount();
    },
    methods: {
      onSubmit() {
        console.log('submit!');
      },
      // 每页条数改变时
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        // 重新查询数据
        this.getUserList();
      },
      // 当前页改变时
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.currentPageNumber = val;
        // 重新查询
        this.getUserList();
      },
      // 异步调用
      async getUserList() {
        const {data} = await findUserList(this.currentPageNumber, this.pageSize, this.userVO)
        this.userList = data.data.users;
        this.total = data.data.total;
      },
      async getDeptListAndCount() {
        const {data} = await findDeptAndCount()
        this.departments = data.data.deptAndCounts;
      },
      resetUserVO() {
        this.userVO.departmentId = '';
        this.userVO.userName = '';
        this.userVO.email = '';
        this.userVO.sex = '';
        this.userVO.nickName = '';
        // this.$refs[formName].resetFields();
        // 重置后重新查询全部
        this.getUserList();
      },
      // 按钮点击事件 显示新增编辑弹窗组件
      show(){
        console.log("show")
        this.addOrUpdateVisible = true
      },
      // 监听 子组件弹窗关闭后触发，有子组件调用
      showAddOrUpdate(data){
        if(data === 'false'){
          this.addOrUpdateVisible = false
        }else{
          this.addOrUpdateVisible = true
        }
      }
    }
  }
</script>

<style scoped>


  .el-breadcrumb {
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 12px;
  }
</style>
